<div id="viewer-container"></div>
<div id="back" style="position: absolute;top: 0px;left: 0px; width: 100%;height: 100%;background: coral;z-index: 99999;
            display: flex;justify-content: center;align-items: center">
  <div id="text" style="text-shadow: 5px 5px 5px black;font-size: 100px;color: rgba(5,24,38)">00%</div>
</div>
<script>
  let dom = document.getElementById('text')
  let viewer
  let model

  CTS.ready(() => {
    viewer = new CTS.Viewer('viewer-container') //初始化场景
    let modeloader = new CTS.ModelLoder(viewer)
    viewer.camera.position.set(13, 13, 13) //设置相机位置
    modeloader.loadModelToScene('resources/model/building.glb', _model => {
      model = _model
    }, press => {
      if (press == 100) document.getElementById('back').style.display = 'none'
      dom.innerText = press + '%'
    })

    function getRandomCoordinatesAroundOrigin(radius) {
      // 生成一个-1到1之间的随机数，然后乘以半径
      const x = (Math.random() * 2 - 1) * radius
      const z = (Math.random() * 2 - 1) * radius
      return [x, 0, z]
    }

    modeloader.loadModel('resources/model/tree.glb', _model => {
      _model.setScalc(0.5)
      for (let i = -10; i < 100; i++) {
        _model.cloneModel(getRandomCoordinatesAroundOrigin(50))
      }
    })
  })
</script>
